<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下拉选项</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
            width: 200px;

        }

        li {
            height: 40px;
            line-height: 40px;
            border: 1px solid #ccc;
            text-align: center;
            margin-top: -1px;
            cursor: pointer;
            /* 禁止用户选中文本 */
            user-select: none;
        }

        .select-container {
            width: 200px;
            margin: 20px auto;
        }

        .title {
            background-color: #4169e1;
            font-size: 14px;
            height: 40px;
            line-height: 40px;
            color: #fff;
            text-align: center;
            border-radius: 5px;
            user-select: none;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div id="app">

        <div class="select-container">
            <h2 @click="handleClick" class="title">{{title}}</h2>
            <child-component @selected="hanldCustomEvent" ref="child"></child-component>
        </div>
    </div>

    <template id="child-component">
        <ul v-show="isShow">
            <li @click="handleItemClick(item)" v-for="item in list" :key="item.id">{{ item.name }}</li>
        </ul>
    </template>









    <!-- 引入vue -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <script>

        const { createApp, ref, reactive, toRefs, useTemplateRef } = Vue;
        // 创建Vue实例
        const app = createApp({
            setup() {
                const title = ref('请选择')
                const childComp = useTemplateRef('child')
                const handleClick = () => {
                    childComp.value.show()
                }
                const hanldCustomEvent = (name) => {
                    title.value = name
                    // 隐藏下拉列表
                    childComp.value.hide()
                }
                return {
                    title,
                    handleClick,
                    hanldCustomEvent
                }
            }
        })

        app.component('child-component', {
            template: '#child-component',
            emits: ['selected'],
            setup(props, ctx) {
                const state = reactive({
                    list: [
                        { id: '1', name: 'C# 编程基础' },
                        { id: '2', name: 'Java 编程基础' },
                        { id: '3', name: '桌面程序设计' }
                    ],
                    isShow: false
                })

                const show = () => {
                    state.isShow = true
                }
                const hide = () => {
                    state.isShow = false
                }
                const handleItemClick = (item) => {
                    // 触发自定义事件
                    ctx.emit('selected', item.name)

                }
                return {
                    ...toRefs(state),
                    show,
                    hide,
                    handleItemClick
                }
            }
        })

        // 挂载到dom
        app.mount('#app')
    </script>
</body>

</html>